<template>
  <div>
    <!--
            <div ref="editorNav" class="toolbar ">
                <div @click="source">查看源码</div>
            </div>
            -->
    <div ref="editorElem" v-model="value" ></div>
  </div>
</template>
    <script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import wangEditor from 'wangeditor';
import i18next from 'i18next'
export default {
  props: {
    value: String,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      flag: true,
      editor: null,
      show: true,
    };
  },
  computed: {
    ...mapGetters(["imagesUploadApi"]),
  },
  watch: {
    value: {
      handler(val) {
        if (this.flag) {
          //这里初始化的时候赋值
          if (!val) {
            this.editor.txt.html("");
          } else {
            this.editor.txt.html(val);
          }
        }
        this.flag = true;
      },
      deep: true,
    },
    disabled(val) {
      this.editor.$textElem.attr("contenteditable", !val);
    },
  },
  mounted() {
    const self = this;
    console.log(i18next)
    let E = require("wangeditor");
    self.editor = new E(this.$refs.editorElem); //创建富文本实例
    
    self.editor.config.languages['tc'] = {
        wangEditor: {
            插入: '插入',
            默认: '默認',
            创建: '創建',
            修改: '修改',
            如: '如',
            请输入正文: '請輸入正文',
            重置: "重置",
            menus: {
              title: {
                    标题: '標題',
                    加粗: '加粗',
                    字号: '字型大小',
                    字体: '字體',
                    斜体: '斜體',
                    删除线: '删除線',
                    缩进: '縮進',
                    行高: '行高',
                    文字颜色: '文字顏色',
                    背景色: '背景色',
                    链接: '連結',
                    序列: '序列',
                    对齐: '對齊',
                    引用: '引用',
                    表情: '表情',
                    图片: '圖片',
                    视频: '視頻',
                    表格: '表格',
                    代码: '代碼',
                    分割线: '分割線',
                    恢复: '恢復',
                    撤销: '撤銷',
                    全屏: '全屏',
                    代办事项: '代辦事項',
                    下划线: "下劃線"
                },
                dropListMenu: {
                    设置标题: '設定標題',
                    背景颜色: '背景顏色',
                    文字颜色: '文字顏色',
                    设置字号: '設定字型大小',
                    设置字体: '設置字體',
                    设置缩进: '設定縮進',
                    对齐方式: '對齊管道',
                    设置行高: '設定行高',
                    序列: '序列',
                    head: {
                        正文: 'text',
                    },
                    indent: {
                        增加缩进: '新增縮進',
                        减少缩进: '减少縮進',
                    },
                    justify: {
                        靠左: '靠左',
                        居中: '居中',
                        靠右: '靠右',
                        两端: "兩端"
                    },
                    list: {
                        无序列表: '無序列錶',
                        有序列表: '有序列錶',
                    },
                },
                panelMenus: {
                    emoticon: {
                        默认: '默認',
                        新浪: '新浪',
                        emoji: 'emoji',
                        手势: '手勢',
                    },
                    image: {
                        上传图片: '上傳圖片',
                        图片链接: '圖片連結',
                        网络图片: '網絡圖片',
                    },
                    link: {
                        链接: '連結',
                        链接文字: '連結文字',
                        删除链接: '删除連結',
                        查看链接: '查看連結',
                    },
                    video: {
                        插入视频: '插入視頻',
                        上传视频: "上傳視頻"
                    },
                    table: {
                        行: '行',
                        列: '列',
                        的: '的',
                        表格: '表格',
                        添加行: '添加行',
                        删除行: '删除行',
                        添加列: '添加列',
                        删除列: '删除列',
                        设置表头: '設定表頭',
                        取消表头: '取消表頭',
                        插入表格: '插入表格',
                        删除表格: '删除表格',
                    },
                    code: {
                        删除代码: '删除代碼',
                        修改代码: '修改代碼',
                        插入代码: '插入代碼',
                    },
                },
            },
            validate: {
                张图片: '張圖片',
                大于: '大於',
                图片链接: '圖片連結',
                不是图片: '不是圖片',
                返回结果: '返回結果',
                上传图片超时: '上傳圖片超時',
                上传图片错误: '上傳圖片錯誤',
                上传图片失败: '上傳圖片失敗',
                插入图片错误: '插入圖片錯誤',
                一次最多上传: '一次最多上傳',
                下载链接失败: '下載連結失敗',
                图片验证未通过: '圖片驗證未通過',
                服务器返回状态: '服務器返回狀態',
                上传图片返回结果错误: '上傳圖片返回結果錯誤',
                请替换为支持的图片类型: '請替換為支持的圖片類型',
                您插入的网络图片无法识别: '您插入的網絡圖片無法識別',
                您刚才插入的图片链接未通过编辑器校验: '您剛才插入的圖片連結未通過編輯器校驗',
                上传视频失败: "上傳視頻失敗",
                上传视频超时: "上傳視頻超時",
                上传视频返回结果错误: "上傳視頻返回結果錯誤",
                上传视频错误: "上傳視頻錯誤",
                不是视频: "不是視頻",
                个视频: "個視頻",
                插入视频错误: "插入視頻錯誤",
                视频链接: "視頻連結",
                视频验证未通过: "視頻驗證未通過",
            }, 
        }
    }
    self.editor.config.pasteFilterStyle = false;
    self.editor.config.colors = [
      "#448ef6",
      "#afb0b2",
      "#ffffff",
      "#171928",
    ];
    self.editor.config.onchange = (html) => {
      this.flag = false; //这里改变绝对不能触发初始化赋值 否者会出现问题
      self.$emit("input", html);
    };
    self.editor.config.uploadImgServer = this.$store.state.api.imagesUploadApi;
    self.editor.config.uploadFileName = "image";
    self.editor.config.uploadImgMaxSize = 1024 * 1024; // 将图片大小限制为 1M
    self.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
    self.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
    self.editor.config.uploadImgHeaders = {
      Authorization: "Bearer " + getToken(),
    };
    self.editor.config.menus = [
      //菜单配置  https://www.kancloud.cn/wangfupeng/wangeditor3/335776 可查看配置选项
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      //   'emoticon',  // 表情
      "image", // 插入图片
      "table", // 表格
      //   'video',  // 插入视频
      // 'code',  // 插入代码
      "undo", // 撤销
      "redo", // 重复
      //   "fullscreen", // 全屏
    ];
    //下面是最重要的的方法
    self.editor.config.uploadImgHooks = {
      before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
      },
      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        self.imgUrl = Object.values(result.data).toString();
      },
      fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        console.log(result);
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        insertImg(result.data.url);
        // result 必须是一个 JSON 格式字符串！！！否则报错
      },
    };
    self.editor.config.onblur = function (html) {
      // html 即编辑器中的内容
      // this.$emit('update:value',html)
    };
    self.editor.config.lang = (localStorage.getItem('langTail')=='zh'?'zh-CN':localStorage.getItem('langTail'));
    self.editor.i18next = i18next
    console.log(self.editor.config.languages['en'],'aditor')
    self.editor.create();
    self.editor.$textElem.attr("contenteditable", !self.disabled);
    this.init(this.value);
  },
  methods: {
    init(text) {
      this.editor.txt.html(text);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .w-e-text-container {
  // background: #171928;
  .w-e-text p,
  .w-e-text h1,
  .w-e-text h2,
  .w-e-text h3,
  .w-e-text h4,
  .w-e-text h5,
  .w-e-text table,
  .w-e-text pre {
    margin: 5px 0;
  }
}
::v-deep .toolbar {
  border: 1px solid #ccc;
}
::v-deep .text {
  border: 1px solid #ccc;
  height: 400px;
  background: #171928;
}
::v-deep .w-e-toolbar {
  background-color: #f1f1f1 !important;
  flex-wrap: wrap;
}
</style>